<template>
	<view>
		<view class="bgd">
			<view class="bgdtitle">添加银行卡</view>
			<view class="bgdname">添加您的银行卡</view>
		</view>
		<view class="bg">
			<u--form class="tableform" labelPosition="left" :model="userInfo" :rules="rules" ref="form1">
				<view class="bgtitle">
					持卡人姓名
				</view>
				<view class="imputbottom">
					<u--input placeholder="请输入姓名" clearable v-model="userInfo.userName"></u--input>
				</view>
				<!-- <u-form-item labelWidth='80' class="inputs"	label="姓名" prop="userInfo.userName"  borderBottom ref="item1">
						<image src="../../static/tabsIcon/card/name.png" style="width: 40upx;height: 40upx;" mode=""></image>
						
					</u-form-item> -->
				<view class="bgtitle">
					银行卡号
				</view>
				<view class="imputbottom">
					<u--input type="number"placeholder="请输入卡号" clearable v-model="userInfo.cardNumber" border="bottom"></u--input>
				</view>

				<view class="bgtitle">
					开户银行
				</view>
				<view class="imputbottom" @click="() => showpop = true">
					<u--input v-model="bankname" disabled disabledColor="#ffffff" placeholder="请选择银行" border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					</u--input>
				</view>


				<view class="bgtitle">
					账单日
				</view>
				<view class="imputbottom" @click='() => show = true'>
					<u--input v-model="userInfo.billingDate" disabled disabledColor="#fff" placeholder="请选择日期"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker :show="show" :columns="days" @confirm='selectstartday' @close='() => show = false'
						@cancel='() => show = false' :closeOnClickOverlay='true'></u-picker>
				</view>

				<view class="bgtitle">
					最后还款日
				</view>
				<view class="imputbottom" @click='() => showend = true'>
					<u--input v-model="userInfo.lastRepaymentDate" disabled disabledColor="#fff" placeholder="请选择日期"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker :show="showend" :columns="days2" @confirm='selectendday' @close='() => showend = false'
						@cancel='() => showend = false' :closeOnClickOverlay='true'></u-picker>
				</view>



				<!-- 	<u-form-item label="验证码" labelWidth='80' borderBottom @click="showcode = true" ref="item6" prop="userInfo.code">
						    <u-input border="none" clearable placeholder="请输入验证码" v-model="model1.code" type="text"></u-input>
						    <u-button slot="right" type="success" size="mini" @click="getCode">{{tips}}</u-button>
						</u-form-item> -->

			</u--form>

			<u-popup :show="showpop" mode="top" @close="() => showpop =false">
				<view style="height: 60vh;">
					<view class="searchtop">
						<u-search height='100' placeholder="请输入银行名称" bgColor="#f2f2f2" :clearabled="true"
							v-model="searchbankname" :show-action="true" actionText="搜索" :animation="true"
							@custom='search()' @change="search()"></u-search>
					</view>
					<scroll-view class="searchbottom" scroll-y="true">
						<view v-for="(item,index) in search(searchbankname)" class="searchbottomview"
							@click="selectbank(item)">
							<view class="searchbottomleft">
								<image :src="item.bankIconLink" style="width: 80upx;height: 80upx;"></image>
							</view>
							<view class="searchbottomright">
								{{item.bankName}}
							</view>
						</view>

					</scroll-view>
				</view>

			</u-popup>

		</view>

		<u-button class="btn" @click="submit">确认添加</u-button>
	</view>

</template>

<script>
	import time from "../../common/time.js"
	import {
		selectbankcard,
		insertbankcard,
	} from '@/api/club'
	export default {
		data() {
			return {
				backname: '',
				showbank: false,
				days: [
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18',
						'19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'
					]
				],
				days2: [
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18',
						'19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'
					]
				],
				border: 10,
				showcode: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				show: false,
				showend: false,
				showpop: false,
				bankname: '',
				searchbankname: '',
				userInfo: {
					userName: '',
					cardNumber: '',
					billingDate: null,
					lastRepaymentDate: null,
					bankIconId: '',
					type: 0
				},
				rules: {
					// 'userName': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// }
				},
				radio: '',
				switchVal: false,
				tips: '点击获取',
				// refCode: null,
				seconds: 60,
				columns: [],
				newbank: [],
			}
		},
		created() {
			// this.getMorelessons();
		},
		mounted() {
			this.selectbankcard();
		},
		onLoad(data) {},
		methods: {
			formatter(type, value) {
				// if (type === 'year') {
				//     return `${value}年`
				// }
				// if (type === 'month') {
				//     return `${value}月`
				// }
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},

			selectstartday(e) {
				// console.log(e.value[0])
				this.userInfo.billingDate = Number(e.value[0]);
				this.show = false;
			},
			selectendday(e) {
				// console.log(e.value[0])
				this.userInfo.lastRepaymentDate = Number(e.value[0]);
				this.showend = false;

			},
			search() {
				// this.columns  = [];
				// this.newbank  = [];

				// this.searchbankname;
				//  this.columns.forEach(item => {
				// 		if (item.name.indexOf(keywords) ! = -1){
				// 						newList.push(item)
				// 			}
				// })


				var newList = []
				this.newbank.forEach(item => {
					if (item.bankName.indexOf(this.searchbankname) != -1) {
						newList.push(item)
					}
				})
				return newList
			},
			selectbank(item) {
				// console.log("00000000")
				this.bankname = item.bankName;
				this.userInfo.bankIconId = item.id;
				this.showpop = false;
			},
			submit() {
				if (this.userInfo.cardNumber.length < 14) {
					uni.showToast({
						title: '请输入正确银行卡号',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.userInfo.lastRepaymentDate >= 32 || this.userInfo.lastRepaymentDate == 0 || this.userInfo
					.lastRepaymentDate == null) {
					uni.showToast({
						title: '请输入最后还款日',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.userInfo.billingDate >= 32 || this.userInfo.billingDate == 0 || this.userInfo.billingDate ==
					null) {
					uni.showToast({
						title: '请输入正确正确账单日',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				// console.log(this.userInfo)
				let sss = {
					userName: this.userInfo.userName,
					cardNumber: this.userInfo.cardNumber,
					billingDate: this.userInfo.billingDate,
					lastRepaymentDate: this.userInfo.lastRepaymentDate,
					bankIconId: this.userInfo.bankIconId,
					type: 0
				}
				insertbankcard(sss).then(res => {
					if (res.success == 1) {
						setTimeout(() => {
							uni.navigateBack({});
						}, 500)
						
						uni.showToast({
							title: '添加成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			selectbankcard() {
				this.columns = [];
				this.newbank = [];
				selectbankcard().then(res => {
					for (let sss in res.data) {
						this.columns.push(res.data[sss])
						this.newbank.push(res.data[sss])
					}
				})
			},

			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>
<style>
	page {
		background-color: rgb(229, 231, 233);
	}
</style>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.bg {
		height: 750upx;
		width: 95%;
		background-color: #FFFFFF;
		border-radius: 40upx;
		margin: -80upx auto 0 auto;

		.bgtitle {
			margin-left: 20upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			letter-spacing: 5upx;
			opacity: 1;
			margin: 30upx 0 0 0;
		}

		.imputbottom {
			border-bottom: 2upx solid #CCCCCC;
		}
	}

	.bgd {
		width: 100%;
		height: 400upx;
		background-color: #FC6758;
		display: flex;
		flex-direction: column;
		justify-content: center;
		z-index: 1;

		.bgdtitle {
			// height: 60upx;
			margin-left: 40upx;
			font-size: 40upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 24upx;
			color: #FFFFFF;
			opacity: 1;

		}

		.bgdname {
			margin-top: 30upx;
			margin-left: 40upx;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.4;
		}
	}

	.tableform {
		position: relative;
		width: 80%;
		margin: 0 auto;
		padding-top: 40upx;
		left: 0;
		right: 0;

		.inputs {
			top: 40upx;
			// background-color: #5AC725;
		}
	}

	.btn {
		width: 90%;
		margin: 0 auto;
		left: 0;
		right: 0;
		margin-top: 100upx;
		background-color: #FC6758;
		border-radius: 999rem;
		color: #FFFFFF;
	}

	.searchtop {
		position: fixed;
		width: 100%;
		height: 100upx;
		// background-color: #007AFF;
	}

	.searchbottom {
		position: absolute;
		bottom: 0;
		height: calc(60vh - 100upx);
		touch-action: none;

		.searchbottomview {
			display: flex;
			height: 100upx;
			border-top: 1upx solid rgba(0, 0, 0, 0.1);
			// background-color: #4CD964;
			align-items: center;

			.searchbottomleft {
				margin-left: 40upx;
			}

			.searchbottomright {
				margin-left: 80upx;
			}
		}

	}
</style>
